{% extends "admin/base_site.html" %}
{% load i18n admin_static %}
{% load custom_filters %}

{% block extrastyle %}
	<link href="{{ STATIC_URL }}chosen/chosen.min.css" rel="stylesheet" type="text/css" media="screen">
{% endblock %}

{% block extrajs %}
	<script type="text/javascript" src="{{ STATIC_URL }}base/js/notification.js"></script>
	<script src="{{ STATIC_URL }}chosen/chosen.jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#division").chosen({no_results_text: "No division match", width: "30%"}).change(
				function(){
					var selected_division = $("#division").val();
					$.each($("option[data-type='teams']"), function(){
						if(selected_division == null){
							$(this).removeAttr('disabled');
						}else{
							if(selected_division.indexOf($(this).attr('data-division')) == -1){
								$(this).attr('disabled', 'disabled');
							}else{
								$(this).removeAttr('disabled');
							}
						}
					});
					$.each($("option[data-type='pjms']"), function(){
						if(selected_division == null){
							$(this).removeAttr('disabled');
						}else{
							if(selected_division.indexOf($(this).attr('data-division')) == -1){
								$(this).attr('disabled', 'disabled');
							}else{
								$(this).removeAttr('disabled');
							}
						}
					});
					$("#teams").trigger('chosen:updated');
					$("#pjms").trigger('chosen:updated');
				}
			);
			$("#teams").chosen({no_results_text: "No production teams match", width: "30%"}).change(
				function(){
					var selected_teams = $("#teams").val();
					$.each($("option[data-type='pjms']"), function(){
						if(selected_teams == null){
							$(this).removeAttr('disabled');
						}else{
							if(selected_teams.indexOf($(this).attr('data-teams')) == -1){
								$(this).attr('disabled', 'disabled');
							}else{
								$(this).removeAttr('disabled');
							}
						}
					});
					$("#pjms").trigger('chosen:updated');
				}
			);
			$("#clouds").chosen({no_results_text: "No studio clouds match", width: "30%"}).change(
				function(){
					var selected_clouds = $("#clouds").val();
					$.each($("option[data-type='studios']"), function(){
						if(selected_clouds == null){
							$(this).removeAttr('disabled');
						}else{
							if(selected_clouds.indexOf($(this).attr('data-clouds')) == -1){
								$(this).attr('disabled', 'disabeld');
							}else{
								$(this).removeAttr('disabled');
							}
						}
					});
					$("#studios").trigger('chosen:updated');
				}
			);
			$("#studios").chosen({no_results_text: "No studios match", width: "30%"});
			$("#pjms").chosen({no_results_text: "No studios match", width: "30%"});
		});

		var select_all = function(id){
			$("#deselect_all_" + id).css('display', 'inline-block');
			$("#select_all_" + id).css('display', 'none');
			$("#" + id + " option").prop('selected', true);
			$("#" + id).trigger('chosen:updated');
		};
		var deselect_all = function(id){
			$("#select_all_" + id).css('display', 'inline-block');
			$("#deselect_all_" + id).css('display', 'none');
			$("#" + id + " option").prop('selected', false);
			$("#" + id).trigger('chosen:updated');
		};

		var refresh_charts = function(){
			$("#filter_btn").css("display", "none");
			$("#loading_box").css("display", "inline-block");
			var division = "";
			var teams = "";
			var clouds = "";
			var studios = "";
			var pjms = "";
			if($("#division").val() != null){
				$.each($("#division").val(), function(k, v){
					division += (v + ',');
				});
			}
			if($("#teams").val() != null){
				$.each($("#teams").val(), function(k, v){
					teams += (v + ',');
				});
			}
			if($("#clouds").val() != null){
				$.each($("#clouds").val(), function(k, v){
					clouds += (v + ',');
				});
			}
			if($("#studios").val() != null){
				$.each($("#studios").val(), function(k, v){
					studios += (v + ',');
				});
			}
			if($("#pjms").val() != null){
				$.each($("#pjms").val(), function(k, v){
					pjms += (v + ',');
				});
			}
			$.ajax({
				url: "",
				data: {'division': division,
					   'teams': teams,
					   'clouds': clouds,
					   'studios': studios,
					   'pjms': pjms
					  },
				success: function(data){
					if(data.status == 1){
						$("#charts").html(data.html);
						$("#filter_btn").css("display", "inline-block");
						$("#loading_box").css("display", "none");
					}
				}
			});
		}
	</script>
{% endblock %}

{% block breadcrumbs %}
{% endblock %}

{% block content %}
	<div id="charts">
		{% include "base/charts.html" %}
	</div><br />
	<div>
		<div>
			<h2 style="display: inline-block; text-align: right; width: 10%">Division: &nbsp;</h2>
			<select data-placeholder="Select Division..." id="division" multiple>
				<option value=""></option>
				{% for d in my_division %}
					<option value="{{ d.pk }}">{{ d.name }}</option>
				{% endfor %}
			</select>&nbsp;
			<a id="select_all_division" href="javascript:void(0);" onclick="select_all('division')">Select all division</a>
			<a id="deselect_all_division" href="javascript:void(0);" onclick="deselect_all('division')" style="display: none;">Deselect all division</a>
		</div><br />
		<div>
			<h2 style="display: inline-block; text-align: right; width: 10%">Production Teams: &nbsp;</h2>
			<select data-placeholder="Select Production Teams..." id="teams" multiple>
				<option value=""></option>
				{% for d in my_division %}
					<optgroup label="{{ d.name }}">
						{% for t in d.productionteam_set.all %}
							{% if t in my_teams %}
								<option data-type="teams" data-division="{{ d.pk }}" value="{{ t.pk }}">{{ t.name }}</option>
							{% endif %}
						{% endfor %}
					</optgroup>
				{% endfor %}
			</select>
		</div><br />
		<div>
			<h2 style="display: inline-block; text-align: right; width: 10%">PJMs: &nbsp;</h2>
			<select data-placeholder="Select PJMs..." id="pjms" multiple>
				<option value=""></option>
				{% for t in my_teams %}
					<optgroup label="{{ t.name }} - {{ t.group.name }}">
						{% for u in t.user.all %}
							{% if u in my_pjms %}
								<option data-type="pjms" data-division="{{ t.group.pk }}" data-teams="{{ t.pk }}" value="{{ u.pk }}">{{ u }}</option>
							{% endif %}
						{% endfor %}
					</optgroup>
				{% endfor %}
			</select>
		</div><br /><hr />
		<div>
			<h2 style="display: inline-block; text-align: right; width: 10%">Studio Clouds: &nbsp;</h2>
			<select data-placeholder="Select Studio Clouds..." id="clouds" multiple>
				<option value=""></option>
				{% for c in my_clouds %}
					<option value="{{ c.pk }}">{{ c.cloud_id }}{% if c.get_parent_brand %} - {{ c.get_parent_brand }}{% endif %}</option>
				{% endfor %}
			</select>&nbsp;
			<a id="select_all_clouds" href="javascript:void(0);" onclick="select_all('clouds')">Select all studio clouds</a>
			<a id="deselect_all_clouds" href="javascript:void(0);" onclick="deselect_all('clouds')" style="display: none;">Deselect all studio clouds</a>
		</div><br />
		<div>
			<h2 style="display: inline-block; text-align: right; width: 10%">Studios: &nbsp;</h2>
			<select data-placeholder="Select Studios..." id="studios" multiple>
				<option value=""></option>
				{% for c in my_clouds %}
					<optgroup label="{{ c.cloud_id }}">
						{% for s in c.studio_set.all %}
							{% if s in my_studios %}
								<option data-type="studios" data-clouds="{{ c.pk }}" value="{{ s.pk }}">{{ s }}</option>
							{% endif %}
						{% endfor %}
					</optgroup>
				{% endfor %}
			</select>
		</div><br />
		<div style="text-align: right; width: 40%">
			<input id="filter_btn" type="button" value="Filter" onclick="refresh_charts()" class="btn btn-info" style="display: inline-block;" />
			<i id="loading_box" class="btn btn-info" style="display: none;">Loading...</i>
		</div>
	</div>
{% endblock %}
